<template>
  <basic-container>
    <avue-crud
      :option="option"
      :table-loading="loading"
      v-model="form"
      :data="data"
      :page.sync="page"
      ref="crud"
      :search.sync="query"
      :before-open="beforeOpen"
      @search-change="searchChange"
      @search-reset="searchReset"
      @selection-change="selectionChange"
      @current-change="currentChange"
      @size-change="sizeChange"
      @refresh-change="refreshChange"
      @on-load="onLoad"
    >
      <template slot="sequenceDefinitionSubTypeSearch">
        <el-select v-model="query.sequenceDefinitionSubType" placeholder="请选择业务小类" :clearable="true">
          <el-option v-for="cateItem in subTypeList" :key="cateItem.value" :label="cateItem.label" :value="cateItem.value"> </el-option>
        </el-select>
      </template>
      <template slot="menuRight">
        <user-table-config :option="option" @confirm="(val) => handleSetUserConfig(val, pageCode)"></user-table-config>
      </template>
    </avue-crud>
    <common-modal-template ref="commonModalTemplate" :option="tableOption" @getSelectedRows="getSelectedRows" :key="timer" @newKey="newKey"></common-modal-template>
    <print-time-input-form :visible.sync="printDialog" :other-info-option="otherInfoOption" @printInfo="(otherInfo) => handlePrintSequence(otherInfo)"></print-time-input-form>
  </basic-container>
</template>
<script>
import CommonModalTemplate from '@/components/common-modal-template/common-modal-template.vue';
import CommonPrintersTemplate from '@/components/common-printers-template/common-printers-template.vue';
import userTableConfig from '@/components/user-table-config';
import { getPage } from '@/api/admin/serialnumberQuery';
import { getSeqNoRules, subTypeMap } from '@/util/global';
import { getCategory } from '@/api/warehouse/materialRules';
import { mapGetters } from 'vuex';
import printTimeInputForm from '@/components/print-time-input-form';

export default {
  name: 'AdminBarcodeRecord',
  components: {
    CommonModalTemplate,
    CommonPrintersTemplate,
    userTableConfig,
    printTimeInputForm
  },
  //   mixins: [userConfig(), getPrintFormMixin],
  data() {
    return {
      pageCode: 'ADMIN_BARCODE_RECORD',
      form: {},
      query: { subType: 'raw_material_packaging' },
      loading: true,
      title: '',
      detailLoading: false,
      flagType: false,
      scrapData: {},
      page: {
        pageSize: 20,
        currentPage: 1,
        total: 0
      },

      selectionList: [],
      data: [],
      option: {
        height: 'calc(100vh - 520px)',
        calcHeight: 30,
        tip: false,
        menu: false,
        searchShow: true,
        searchMenuSpan: 24,
        searchMenuPosition: 'right',
        border: true,
        index: true,
        addBtn: false,
        delBtn: false,
        viewBtn: false,

        editBtn: false,
        selection: false,
        dialogClickModal: false,
        indexLabel: '序号',
        menuWidth: 250,
        columnBtn: false,
        searchLabelWidth: 100,
        column: [
          {
            label: '标签ID',
            prop: 'id',
            searchSpan: 6,
            search: true
          },
          {
            label: '序列号',
            prop: 'sequenceNumber',
            searchSpan: 6,
            search: true
          },
          {
            label: '大类',
            prop: 'type',
            type: 'select',
            dicUrl: '/api/blade-system/dict/dictionary?code=dalei',
            props: {
              label: 'dictValue',
              value: 'dictKey'
            },
            searchSpan: 6
          },
          {
            label: '小类',
            prop: 'subType',
            dicUrl: '/api/blade-system/dict/dictionary?code=material',
            props: {
              label: 'dictValue',
              value: 'dictKey'
            },
            // formatter: (row) => {
            //   return subTypeMap[row.sequenceDefinitionSubType] || '';
            // },
            clearable: false,
            fromslot: true,
            searchSpan: 6,
            type: 'select',
            search: true
          },
          {
            label: '单据号',
            prop: 'sourceNo',
            searchSpan: 6,
            search: true
          },
          {
            label: '物料编码',
            prop: 'partNo',
            searchSpan: 6,
            search: true
          },
          {
            label: '序列号规则',
            prop: 'sequenceDefinitionName'
          },

          {
            label: '生成时间',
            prop: 'createTime'
          },
          {
            label: '标签状态',
            prop: 'statusStr',
            type: 'select',
            search: true,
            searchSpan: 6,
            dicData: [
              { label: '正常', value: '正常' },
              { label: '报废', value: '报废' }
            ]
            // search: true
          },
          {
            label: '生成时间',
            prop: 'datetimerange',
            searchType: 'datetimerange',
            format: 'yyyy-MM-dd HH:mm:ss',
            valueFormat: 'yyyy-MM-dd HH:mm:ss',
            search: true,
            searchSpan: 12,
            hide: true
          }
        ]
      },

      timer: new Date().getTime(),
      modalName: '',
      sourceType: '',
      subTypeList: []
    };
  },
  computed: {
    ...mapGetters(['permission', 'userInfo'])
  },
  mounted() {
    this.$nextTick(() => {
      //搜索与表格结构分隔
      this.$structuralSplit();
    });
    console.log(this.option.column, 'column');
  },
  methods: {
    searchChange(params, done) {
      if (params.datetimerange && params.datetimerange.length > 0) {
        params.startTime = params.datetimerange[0];
        params.endTime = params.datetimerange[1];
        delete params.datetimerange;
      }
      // this.query = params;
      this.page.currentPage = 1;
      this.onLoad(this.page, params);
      done();
    },
    searchReset() {
      this.query['subType'] = 'raw_material_packaging';
      console.log(this.query, ' this.query');
      this.onLoad(this.page);
    },
    selectionChange(list) {
      this.selectionList = list;
    },
    currentChange(currentPage) {
      this.page.currentPage = currentPage;

      this.onLoad(this.page, this.query);
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
    },

    refreshChange() {
      this.onLoad(this.page, this.query);
    },
    onLoad(page, params = {}) {
      // if (params.subType == undefined) {
      //   params['subType'] = 'raw_material_packaging';
      // }
      //   this.loading = false;
      //   this.data = [{ barCodeType: '', barCodeRule: '123' }];
      this.loading = true;
      const query = this._cloneDeep(this.query);
      if (query.datetimerange && query.datetimerange.length > 0) {
        delete query.datetimerange;
      }
      getPage(page.currentPage, page.pageSize, Object.assign(params, query)).then((res) => {
        const data = res.data.data;
        this.page.total = data.total;
        // [] || dataListTable
        this.data = this._map(data.records, (item) => {
          return {
            ...item,
            sheetNo: item.sheetNo || item.orderNo
          };
        });
        this.loading = false;
        done();
      });
    },

    /**
     * 重新加载公用表格弹窗组件
     */
    newKey() {
      this.timer = new Date().getTime();
    }
  }
};
</script>

<style scoped lang="scss">
.menu-option {
  text-align: left;
  padding: 0 30px;
}
.sequenceNumber {
  position: relative;
  padding: 8px 0 8px 0;
}
.detail {
  ::v-deep .el-table--small td {
    padding: 0;
  }
  ::v-deep .el-table .cell {
    padding: 0 0 0 8px;
  }
}
</style>
